<template>
    <div id="back">
        <div id="container">
            <el-button style="margin: 30px;" @click="dialogCorrectANswer = true"
                :type="corretc_number == 0 ? 'primary' : 'danger'">{{ corretc_number
                    == 0 ?
                    '暂无需要批改的试卷' : `共${corretc_number}条需要批改` }}</el-button>
            <el-table :data="resultTableData" v-loading="loading" style="width: 100%"
                header-row-class-name="center-text">
                <el-table-column prop="answer_user" label="考生" width="250" />
                <el-table-column prop="test_paper" label="试卷" width="250" />
                <el-table-column prop="create_time" label="考试时间" width="250" />
                <el-table-column prop="score" label="分数" width="380">
                    <template #default="scope">
                        <div class="center-text" v-for="(value, key) in JSON.parse(scope.row.score)">
                            <el-text :type="key == '总分' ? 'danger' : 'default'">{{ key + ': ' + value }}
                            </el-text>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <el-dialog v-model="dialogCorrectANswer" title="需要批改的试卷" width="1300">
        <el-table :data="tableData" style="width: 100%" header-row-class-name="center-text">
            <el-table-column prop="answer_user" label="考生" width="120" />
            <el-table-column prop="test_paper" label="试卷" width="120" />
            <el-table-column prop="create_time" label="考试时间" width="180" />
            <el-table-column prop="score" label="分数" width="180">
                <template #default="scope">
                    <el-text v-for="(value, key) in JSON.parse(scope.row.score)" type="default">{{ key + ': ' + value }}
                    </el-text>
                </template>
            </el-table-column>
            <el-table-column prop="is_corrected" label="是否批改" width="180">
                <template #default="scope">
                    <el-text v-if="scope.row.is_corrected" type="scuess">是</el-text>
                    <el-text v-else type="warning">否</el-text>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button v-if="!scope.row.is_corrected" text bg
                        @click="download_paper(scope.row)">下载试卷</el-button>
                </template>
            </el-table-column>
            <el-table-column label="打分" width="180">
                <template #default="scope">
                    <el-button v-if="!scope.row.is_corrected" @click="open_mark(scope.row)" type="primary" text
                        bg>打分</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog v-model="dialogVisible" :title="`正在给${now_user}打分，请确认已经查看过答题信息`" width="500" :before-close="handleClose">
        <el-input type="number" placeholder="请输入分数" v-model="score"></el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit_score">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue"
import axios from '../../utils/http.js'
import { ElMessage, ElNotification } from "element-plus";
import { useRoute } from "vue-router";
let route = useRoute()
let dialogCorrectANswer = ref(false)
let dialogVisible = ref(false)
let correct_list = ref([])
let loading = ref(true)
let resultTableData = ref([])
let temp_id = ref('')
let score = ref('')
const table = ref(false)
let now_user = ref('')
let tableData = ref([])
let ScoreData = ref([])
let corretc_number = ref(0)
onMounted(() => {
    get_result()
    testFunc()
})
const open2 = () => {
    if (corretc_number.value != 0) {
        ElNotification({
            title: 'Warning',
            message: `您有${corretc_number.value}条试卷需要批改`,
            type: 'warning',
        })
    } else {
        ElNotification({
            title: 'success',
            message: `暂无试卷需要批改`,
            type: 'success',
        })
    }

}
const get_result = () => {
    axios({
        url: 'examination/view_result/' + route.query.id + '/',
        method: 'GET'
    }).then(res => {
        if (res.data.code == 201) {
            resultTableData.value = res.data.show_data
            loading.value = false
        } else {
            ElMessage.error("加载失败")
            loading.value = false
        }
    })
}
const handleClose = () => {
    dialogVisible.value = false
    score.value = ''
    temp_id.value = ''
}
function open_mark(row) {
    dialogVisible.value = true
    temp_id.value = row.id
    now_user.value = row.answer_user
}
function testFunc() {
    axios({
        url: 'examination/view_result/' + route.query.id + '/',
        method: 'GET'
    }).then(res => {
        tableData.value = res.data.correct_data
        corretc_number.value = res.data.correct_data.length
        open2()
    })
}
function submit_score() {
    axios({
        url: 'answer/correct_answer/',
        method: 'put',
        data: {
            paper_id: temp_id.value,
            score: score.value
        }
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('打分成功')
            dialogVisible.value = false
            dialogCorrectANswer.value = false
            score.value = ''
            temp_id.value = ''
            get_result()
            testFunc()
        } else {
            ElMessage.warning('打分失败')
            dialogVisible.value = false
            score.value = ''
        }
    })
}

function download_paper(row) {
    axios({
        url: 'answer/correct_answer/',
        method: 'POST',
        data: {
            file_id: row.file_id
        }
    }).then((response) => {
        console.log(response.data.url);
        ElMessage.success('试卷获取成功')
        const url = response.data.url;
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${row.answer_user}_${row.test_paper}_${row.create_time}.xlsx`); // 设置下载的文件名和扩展名
        document.body.appendChild(link);
        link.click();
        link.remove();
    })
        .catch((error) => {
            ElMessage.warning('试卷获取失败')
        });
}
</script>

<style scoped>
.center-text {
    display: inline-block;
    margin-right: 10px
}

#back {
    background-color: #ccc;
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url('@/assets/1216364.jpg');
    z-index: 1;
}

#container {
    width: 80%;
    margin: auto;
    margin-top: 50px;
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.el-table {
    margin-top: 20px;
}
</style>